<template>
  <view>
    <view class="back" @click="goBack">
      <p>&lt; 返回</p>
    </view>
    <view class="text_div">
      <view
        ><p style="font-size: 36rpx">
          <b>{{ text }}</b>
        </p></view
      >
      <view
        ><p style="font-size: 28rpx; color: #999999">{{ desc }}</p></view
      >
    </view>
    <view class="login-form">
      <view class="login-form-item">
        <p>手机号</p>
        <input type="tel" placeholder="请输入手机号" />
      </view>
      <view class="login-form-item">
        <p>密码</p>
        <input type="password" placeholder="请设置密码" password />
      </view>
      <view class="login-form-item">
        <p>验证码</p>
        <input type="text" placeholder="请输入验证码" />
        <template>
          <p
            v-if="codeShow"
            style="
              position: relative;
              float: right;
              color: #0ccb82;
              margin-top: -55rpx;
              z-index: 999;
            "
            @click="getPhoneCode"
          >
            {{ yzm }}
          </p>
          <p v-else style="float: right; color: #edeef2; margin-top: -55rpx">
            {{ count }}秒后重试
          </p>
        </template>
      </view>
      <button
        style="background-color: #0ccb82; color: #fff; margin-top: 100rpx"
        @click="register"
      >
        注册
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: "注册账号",
      desc: "消点通：一站式解决员工沟通、文件管理",
      yzm: "获取验证码",
      codeShow: true, //判断显示隐藏
      count: "0", //显示时的文字内容
      timer: null,
    };
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: "/pages/index/index",
      });
    },
    register() {
      uni.switchTab({
        url: "/pages/main/main",
      });
    },
    getPhoneCode() {
      //点击获取验证码
      const TIME_COUNT = 60; //倒计时60秒
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.codeShow = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.codeShow = true;
            clearInterval(this.timer);
            this.timer = null;
            this.yzm = "重新获取验证码";
          }
        }, 1000);
      }
    },
  },
};
</script>

<style>
.back {
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  font-size: 28rpx;
  color: #0ccb82;
}
.login-form {
  position: absolute;
  top: 400rpx;
  margin-left: 70rpx;
  width: 610rpx;
}
.login-form-item {
  padding-top: 20rpx;
}
.login-form-item p {
  font-size: 24rpx;
  color: #666666;
  padding: 10rpx;
}

.login-form-item input {
  font-size: 28rpx;
  padding: 10rpx 10rpx;
  color: #666666;
  border-bottom: 2rpx solid #edeef2;
}
.login-form-item input:hover {
  font-size: 28rpx;
  padding: 10rpx 10rpx;
  color: #0ccb82;
  border-bottom: 2rpx solid #0ccb82;
}
.text_div {
  position: absolute;
  top: 132rpx;
  margin-left: 70rpx;
}
</style>